<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <title>二维码扫描</title>
    <style>
        video {
            display: block;
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background: #000;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<div id="video"></div>
<div>
    <label style="color: red">注：
        <br>1.建议首选<span style="font-size: 20px;font-weight: bold;">百度浏览器</span>，经测其他浏览器由于摄像头授权问题会经常出现扫码黑屏。
        <br>2.扫码时，二维码要尽量水平放在扫描框中，否则扫码灵敏度会降低。
        <br>3.如果二维码不清晰或破损导致扫码无反应时，请用电脑端进行转序操作。
        <br>4.如遇扫码黑屏时，请尝试下拉页面、点击【打开扫码摄像头】按钮或退出浏览器重新登入该系统。</label><br>
    <a th:href="@{/goIndex}" style="padding-top: 25px;">返回首页</a>
    <button id="open" type="button">打开扫码摄像头</button>
    <!--<input id="code1" type="text" />-->
</div>
<div id="result"></div>
</body>
<div th:include="include :: appFooter"></div>
<script th:src="@{/js/qrscan.js}"></script>
<script>

    var ds = null;
    var scan = null;

    function openVideo(){
        scan.closeScan();
        window.clearInterval(ds);
        scan.openScan();
        ds = window.setInterval(function () {
            startScan();
        }, 500);
    }

    $(function () {

        /** 页面延迟1秒打开摄像头 **/
        scan = new QRScan('video');
        setTimeout(function () { openVideo(); }, 1000);

        /** 点击按钮事件打开扫描框 **/
        $("#open").click(function(){
            openVideo();
        });

    });

    var re_div = document.getElementById('result');

    function startScan() {
        scan.getImgDecode(function (data) {
            console.log(data);
            var p = document.createElement('p');
            if (data.success) {
                p.innerHTML = 'RESULT: ' + data.payload;
            } else {
                p.innerHTML = 'ERROR: ' + data.msg;
            }
            re_div.appendChild(p);
        }, [[${type}]]);
    };

</script>
</html>
